<template>
	<nut-popup 
		v-model:visible="visible"
		safe-area-inset-bottom
		:close-on-click-overlay="false"
		:custom-style="customStyle"
	>
		<view class="modal">
			<view class="content">
				<view class="top-card">
					<view class="name-row">
						<view class="name text-ellipsis-l2">{{ likeStoreData?.name }}</view>
						<navigator :url="`/pages/store/detail/index?storeId=${item?.id}`" class="img-box haptics-feedback">
							<image :src="likeStoreData?.coverImage" mode="aspectFill"></image>
							<view class="tag">
								<text>相册</text>
								<nut-icon size="20rpx" name="rect-right"></nut-icon>
							</view>
						</navigator>
					</view>
					<view class="code-box">
						<image :src="likeStoreData?.qrcode" mode="aspectFill"></image>
					</view>
					<view class="desc">
						长按识别图中二维码
					</view>
				</view>
				<view class="bottom-card">
					<view class="phone">联系电话：{{ likeStoreData?.contactPhone }}</view>
					<view class="address">{{ likeStoreData?.address }}</view>
					<view class="btn haptics-feedback" @click="handleMakePhoneCall(likeStoreData?.contactPhone)">立即拨打</view>
				</view>
			</view>
			<view class="close-btn" @click="visible = false">
				<nut-icon name="close-little" size="14" custom-color="#666"></nut-icon>
			</view>
		</view>
	</nut-popup>
</template>

<script setup>
import storage from '@/utils/storage';

const { likeStoreData } = defineProps({
	likeStoreData: {
		type: Object,
		default: {}
	}
})

const customStyle = {
	backgroundColor: 'transparent'
}

const visible = defineModel('visible', {
	default: false
})

const handleMakePhoneCall = (contactPhone) => {
	if (!contactPhone) return;
	uni.makePhoneCall({
		phoneNumber: contactPhone
	})
}
</script>
<style lang="scss" scoped>
.modal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 96rpx;
	margin-top: 100rpx;
	.content {
		width: 692rpx;
		padding: 122rpx 70rpx 80rpx;
        border-radius: 30rpx;
		background: linear-gradient(225.5deg, #978EFF 0%, #1368FF 100%);
		.top-card {
			text-align: center;
			padding: 0 40rpx;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			.name-row {
				display: flex;
				gap: 20rpx;
				justify-content: space-between;
				padding-top: 50rpx;
				.name {
					height: 98rpx;
					text-align: left;
					font-size: 34rpx;
					font-weight: 700;
					background: linear-gradient(90deg, #1C77FF 0%, #4C4CFF 100%);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}
				.img-box {
					position: relative;
					width: 222rpx;
					height: 222rpx;
					border-radius: 30rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: -100rpx;
					image {
						width: 170rpx;
						height: 170rpx;
						border-radius: 20rpx;
					}
					.tag {
						position: absolute;
						z-index: 1;
						right: 30rpx;
						bottom: 30rpx;
						height: 30rpx;
						padding-left: 10rpx;
						display: flex;
						align-items: center;
						border-radius: 30rpx;
						font-size: 20rpx;
						color: #fff;
						background: rgba(0, 0, 0, 0.53);
						text {
							margin-right: -8rpx;
						}
					}
				}
			}
			.code-box {
				width: 312rpx;
				height: 312rpx;
				margin: 8rpx auto;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.desc {
				color: #858585;
				padding-bottom: 20rpx;
			}
		}
		.bottom-card {
			text-align: center;
			padding: 20rpx 40rpx;
			border-radius: 30rpx;
			background-color: #fff;
			.phone {
				margin-bottom: 14rpx;
			}
			.address {
				font-size: 24rpx;
				color: #888D99;
				margin-bottom: 20rpx;
			}
			.btn {
				width: 320rpx;
				height: 68rpx;
				margin: 0 auto;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				border-radius: 30rpx;
				background-color: #FEE05E;
			}
		}
	}
	.close-btn {
		display: inline-block;
		width: 62rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #fff;
	}
}
</style>